<template>
    <el-container style="height: 500px; border: 1px solid #eee">
        <!-- header开始 -->
        <el-header style="text-align: right; font-size: 12px">
            <span>{{userinfo.username}}</span>
            <el-button>退出</el-button>
        </el-header>
         <!-- header开始 -->
        <el-container>
            
             <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                 <!-- $route.name outline -->
                <el-menu :default-openeds="[$route.meta.name]">
                    <el-submenu :index="item.name" v-for="(item,index) in asideMenu" :key="index">
                        <template slot="title"><i class="el-icon-message"></i>{{item.title}}</template>
                        <el-menu-item-group>
                            <el-menu-item :index="index+'-'+i" v-for="(val,i) in item.children" :key="i">
                                <router-link :to="val.path">{{val.title}}</router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>
                
            <el-main>
                <breadcrumb-nav></breadcrumb-nav>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import {mapActions,mapState} from 'vuex';
import BreadcrumbNav from '@/components/breadcrumbNav' 
export default {
    async created(){
        await this.getUserInfo();
    },
    methods:{
        ...mapActions('user',['getUserInfo'])
    },
    computed:{
        ...mapState('user',['userinfo','asideMenu'])
    },
    components:{
        BreadcrumbNav
    }
}
</script>
